<template>
  <div>
    <div class="searchs-wrap">
      <van-search
       class="searchs-wrap-inp"
        v-model="value"
        shape="round"
        background="#fff"
        @input="search()"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="post-search" v-if="shows">
      <div>
        <div class="Showmx-wrap">
          <div  v-show="istrue"
            v-for="(items, indexs) in searchList"
            class="wrap-card"
            @click="details(items.ids)"
          >
            <div>
              <van-image
                class="img"
                radius="10px"
                :src="items.haibao"
                lazy-load
              />
            </div>
            <div class="title-wrap">
              <p>{{ items.title1 }}</p>
              <p>{{ items.price }}</p>
            </div>
          </div>
          <div v-show="!istrue" class="kong-wrap">
            <p>什么也木有找到</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 搜素框防抖节流
import { _debounce, _throttle } from "../../http/delay.js";
export default {
  name: "WorkspaceJsonSearch",

  data() {
    return {
      shows: false,
      value: "",
      searchList: [],
      istrue:true
    };
  },

  mounted() {},

  methods: {
    search: _debounce(function (_type, index, item) {
      this.$http
        .post("/yanchuSearch", {
          title1: this.value,
        })
        .then((res) => {
          console.log(res);
          this.searchList = res.data.data.splice(0, 3);
          this.shows = true;
          if (this.value == "") {
            this.shows = false;
          }else if(res.data.data.length==0){
            this.istrue = false
          }
        })
        .catch((err) => {
          throw err;
          this.shows = false;
        });
    }, 1000),

    // 跳转详情页
    details(ids) {
      // console.log(ids);
      this.$router.push({ path: "/showDetail", query: { ids: ids } });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchs-wrap {
  margin-bottom: 10px;
}
.searchs-wrap-inp{
  padding: 35px 10px 20px 10px!important;
  box-sizing: border-box;
}
.post-search {
  position: absolute;
  top: 50px;
  width: 100%;
  z-index: 99;
  > div {
    width: 90%;
    min-height: 200px;
    margin: 0 auto;
    background: rgb(250, 250, 250);
    border-radius: 10px;
  }
}

.Showmx-wrap {
  box-sizing: border-box;
  width: 100%;
  background: rgb(255, 255, 255);
  .pages-fen {
    padding-top: 30px;
    width: 100%;
    text-align: center;
  }
  .wrap-card {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgb(218, 214, 214);
    > div {
      width: 130px;
      height: auto;
      margin-right: 8vw;
      .img {
        width: 110px;
        height: 150px;
        border-radius: 10px;
      }
    }

    .title-wrap {
      p {
        width: 45vw;
        /* margin: 0px 0; */
      }
      p:nth-child(1) {
        font-size: 15px;
        font-weight: bold;
      }
      p:nth-child(2) {
        font-size: 22px;
        color: rgb(236, 42, 42);
      }
    }
    .wrap-card-buys {
      padding: 15px 40px;
      background: rgb(16, 143, 247);
      border-radius: 10px;
      color: #fff;
      font-weight: bold;
    }
  }
}
.kong-wrap{
  >p{
    text-align: center;
    padding: 50px;
    color: rgb(150, 198, 240);
  }
}
</style>